<template>
  <el-button
    v-if="hasPermission"
    :type="type"
    :size="size"
    :loading="loading"
    :disabled="disabled || loading"
    :icon="icon"
    :round="round"
    :circle="circle"
    :plain="plain"
    @click="handleClick"
    v-bind="$attrs"
    class="common-button"
  >
    <template
      #icon
      v-if="icon"
    >
      <component :is="icon" />
    </template>
    <slot />
  </el-button>
</template>

<script setup lang="ts">
  // 按钮类型定义
  type ButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | ''
  type ButtonSize = 'large' | 'default' | 'small'

  const props = defineProps<{
    // 按钮类型
    type?: ButtonType
    // 按钮尺寸
    size?: ButtonSize
    // 加载状态
    loading?: boolean
    // 是否禁用
    disabled?: boolean
    // 图标组件（Element Plus 图标）
    icon?: Component
    // 是否圆角
    round?: boolean
    // 是否圆形
    circle?: boolean
    // 是否朴素按钮
    plain?: boolean
    // 权限标识（用于权限控制）
    permission?: string | string[]
  }>()

  const emit = defineEmits<{
    (e: 'click', event: MouseEvent): void
  }>()

  // 权限判断
  const hasPermission = computed(
    //TODO 后期使用自定义指令实现
    () => !props.permission,
  )

  // 点击事件
  const handleClick = (event: MouseEvent) => {
    emit('click', event)
  }
</script>

<style scoped>
  .common-button {
    margin-right: 8px;
  }

  .common-button:last-child {
    margin-right: 0;
  }
</style>
